<template>
  <div class="task-arrangement">
    <div class="action-bar">
      <div class="bar-left"></div>
      <div class="bar-right">
        <div class="bar-test">
          <span>测试类型：</span>
          <el-select
            v-model="searchData.testType"
            clearable
            placeholder="请选择测试类型"
          >
            <el-option label="话音测试" value="1"></el-option>
            <el-option label="数据测试" value="2"></el-option>
            <el-option label="视频测试" value="3"></el-option>
          </el-select>
        </div>
        <div class="bar-testType">
          <span>通信设备类型：</span>
          <el-select
            v-model="searchData.commDeviceType"
            placeholder="请选择通信设备类型"
            clearable
          >
            <el-option label="c频段散射通信设备" value="1"></el-option>
            <el-option label="ku频段散射通信设备" value="2"></el-option>
            <el-option label="v/uhf电台设备" value="3"></el-option>
          </el-select>
        </div>
        <div class="bar-testStartTime">
          <span>任务名称：</span>
          <el-input
            v-model="searchData.taskName"
            placeholder="请输入任务名称"
          ></el-input>
        </div>
        <div class="bar-search">
          <span @click="searchTask">搜索</span>
        </div>
      </div>
    </div>
    <div class="display-table">
      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="620"
          style="width: 100%"
        >
          <el-table-column prop="taskName" label="测试任务名称" width="130">
          </el-table-column>
          <el-table-column label="测试类型" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.testType == 1" class="span-green">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else-if="scope.row.testType == 2" class="span-skyblue">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else class="span-lilac">{{
                testTypeDict[scope.row.testType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="通信设备类型" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.commDeviceType == 1" class="span-purple">{{
                commDeviceTypeDict[scope.row.commDeviceType]
              }}</span>
              <span
                v-else-if="scope.row.commDeviceType == 2"
                class="span-blue"
                >{{ commDeviceTypeDict[scope.row.commDeviceType] }}</span
              >
              <span v-else class="span-yellow">{{
                commDeviceTypeDict[scope.row.commDeviceType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendPacketNum" label="发送包数" width="90">
          </el-table-column>
          <el-table-column prop="ser" label="误码率" width="90">
          </el-table-column>
          <el-table-column prop="fer" label="误帧率" width="90">
          </el-table-column>
          <!-- <el-table-column
            prop="recordTimestamp"
            label="记录时间"
            width="160"
          >
          </el-table-column> -->
          <el-table-column prop="mseAverage" label="mse(平均)" width="90">
          </el-table-column>
          <el-table-column prop="mse" label="mse(y,u,v)" width="120">
          </el-table-column>
          <el-table-column prop="psnrAverage" label="psnr(平均)" width="100">
          </el-table-column>
          <el-table-column prop="psnr" label="psnr(y,u,v)" width="120">
          </el-table-column>
          <el-table-column prop="ssimAverage" label="ssim(平均)" width="100">
          </el-table-column>
          <el-table-column prop="ssim" label="ssim(y,u,v)" width="120">
          </el-table-column>
          <el-table-column prop="mos" label="MOS评分" width="90">
          </el-table-column>
          <el-table-column label="文本相似度" width="130">
            <template slot-scope="scope">
              <span> - - </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="span-check" @click="addTask(scope.row)"></span>
              <span
                class="span-delete"
                @click="deleteOneTask(scope.row)"
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="display-table-pagination">
        <div class="pagination-position">
          <span>{{ `共${total}条` }}</span>
          <span class="prev" @click="prevPage">上一页</span>
          <el-input class="page-input" v-model="currentPage"></el-input>
          <span class="next" @click="nextPage">下一页</span>
          <span class="total-page">{{ `${currentPage}/${totalPage}` }}</span>
          <span class="jumpTo">跳转至</span>
          <el-input class="page-input" v-model="jumpPage"></el-input>
          <span class="jump" @click="jumpQueryPage">跳转</span>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      :show-close="false" 
      custom-class="empty-dialog"
      append-to-body
      width="80%"
      height="auto"
      top="5vh"
    >
      <!-- <TaskMe :rowID="rowID" @closeDialog="closeDialog"></TaskMe> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getQualityTestList,
  deleteQualityTest,
} from "@/api/serviceQualityEvaluationDetails";
// import TaskMe from "@/views/comBusinessCfg/components/TaskMe.vue";
export default {
  name: "taskArrangement",
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        taskName: "", // 测试开始时间
        commDeviceType: "", //通信设备类型 1. c频段散射通信设备 2. ku频段散射通信设备 3. v/uhf电台设备
        testType: "", // 测试类型  1. 话音测试 2. 数据测试 3. 视频测试
      },
      tableData: [
        {
          id: "1313123123123", //id
          taskName: "测试任务1", //任务名称
          dataSetName: "话音数据测试.mp3", //数据文件名称
          testType: 1, //测试类型 1. 话音 2. 数据 3. 视频
          commDeviceType: 1, //通信设备类型 1. c频段散射通信设备 2. ku频段散射通信设备 3. v/uhf电台设备
          sendPacketNum: 12023, // 发送包数
          ser: 0.24, //误码率
          fer: 0.86, //误帧率
          recordTimestamp: "2024-08-03 22:28:20", //记录时间
          mseAverage: 1.5, //均方误差（平均）
          mse: "1.5,0.2,0.4", //均方误差（y,u,v）
          psnrAverage: 1.5, //峰值信噪比（平均）
          psnr: "1.5,0.2,0.4", //峰值信噪比（y,u,v）
          ssimAverage: 1.5, //结构相似性指数（平均）
          ssim: "1.5,0.2,0.4", //结构相似性指数（y,u,v）
          mos: 4, //MOS评分
        },
      ],
      multipleSelection: [],
      /* 字典项 */
      commDeviceTypeDict: {
        1: "C",
        2: "Ku",
        3: "VHF/UHF",
      },
      testTypeDict: {
        1: "话音测试",
        2: "数据测试",
        3: "视频测试",
      },
      // 当前页
      currentPage: 1,
      // 总条数
      total: 0,
      // 总页数
      totalPage: 0,
      // 跳转页
      jumpPage: 1,
      // 任务定义弹窗
      dialogVisible: false,
      //编辑flag
      editFlag: false,
      // 编辑的当前数据
      rowData: {},
      // 当前点击行的ID号
      rowID: "",
    };
  },
  props: {},
  components: { 
    // TaskMe 
  },
  methods: {
    // 搜索
    searchTask() {
      console.log("搜索");
      this.searchData.pageNum = this.currentPage;
      this.getQualityTestList(this.searchData);
    },
    // 删除
    deleteOneTask(row) {
      console.log("删除", row.id);
      this.deleteQualityTest(row.id);
    },
    // 删除数据的接口
    deleteQualityTest(deleteArr) {
      // 注意要String处理
      deleteQualityTest(deleteArr)
        .then((res) => {
          this.getQualityTestList(this.searchData);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询数据，搜索，下一页
    getQualityTestList(params) {
      getQualityTestList(params)
        .then((res) => {
          const data = res.data.data;
          const msg = res.data.msg;
          if (msg == "成功") {
            // this.$message.success("查询测试任务信息" + msg);
          } else {
            this.$message.error("查询测试任务信息" + msg);
          }
          if (data != null) {
            this.tableData = data.rows;
            this.total = data.count;
            this.totalPage = parseInt(data.count / 10) + 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //prevPage上一页
    prevPage() {
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage--;
      this.searchData.pageNum = this.currentPage;
      this.getQualityTestList(this.searchData);
    },
    //nextPage下一页
    nextPage() {
      this.currentPage++;
      this.searchData.pageNum = this.currentPage;
      this.getQualityTestList(this.searchData);
    },
    // 跳转页面
    jumpQueryPage() {
      this.searchData.pageNum = this.jumpPage;
      this.currentPage = this.jumpPage;
      this.getQualityTestList(this.searchData);
    },
    //addTask
    addTask(row) {
      this.dialogVisible = true;
      this.rowID = row.id;
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    // 关闭遮罩层的方法
    closeOverlay() {
      this.editFlag = false; // 点击遮罩层时关闭遮罩层
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getQualityTestList(this.searchData);
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.task-arrangement {
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  .action-bar {
    height: 5.25rem;
    line-height: 5.25rem;
    background: url("~@/assets/images/taskArrangement/border.png") no-repeat
      center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .bar-left {
      flex: 2;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .bar-import,
      .bar-export,
      .bar-synch,
      .bar-add,
      .bar-delete {
        cursor: pointer;
        margin: 0 0.625rem;
        :hover {
          color: #1adafb;
        }
      }
      span {
        padding: 0.3125rem;
      }
    }
    .bar-right {
      flex: 5;
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      .bar-test,
      .bar-testStartTime,
      .bar-testEndTime,
      .bar-testType {
        display: flex;
        flex-direction: row;
        flex: 2;
      }
      .bar-search {
        flex: 1;

        :hover {
          color: #1adafb;
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 0.625rem;
          width: 5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: url("~@/assets/images/taskArrangement/search-button.png")
            no-repeat center center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
  .display-table {
    flex: 1;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    .display-table-content {
      height: 90%;
    }
    .display-table-pagination {
      flex: 1;
      position: relative;
      .pagination-position {
        position: absolute;
        right: 2.5rem;
        top: 0;
        font-size: 1rem;
        color: #fff;
        .prev,
        .next,
        .jump,
        .jumpTo {
          margin: 0 0.625rem;
          text-align: center;
          height: 1.875rem;
          line-height: 1.875rem;
          display: inline-block;
        }

        .prev,
        .next {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/prev_next.png")
            no-repeat center center;
          background-size: 100% 100;
          width: 5rem;
        }
        .jump {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/jump.png") no-repeat
            center center;
          background-size: 100% 100%;
          width: 3.75rem;
        }
        .page-input {
          width: 3.75rem;
        }
        .total-page {
          display: inline-block;
          width: 6.25rem;
          height: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
        }
      }
    }
  }
  ::v-deep .el-input {
    width: 12.5rem;
  }

  ::v-deep .el-table--small th,
  .el-table--small td {
    padding: 0px 0px 0px 0px;
    height: 2.5rem;
  }
  .span-purple,
  .span-blue,
  .span-yellow,
  .span-skyblue,
  .span-green,
  .span-lilac {
    display: inline-block;
    width: 6rem;
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: 1.125rem;
  }
  .span-purple {
    background: url("~@/assets/images/taskArrangement/background-purple.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-blue {
    background: url("~@/assets/images/taskArrangement/background-blue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-yellow {
    background: url("~@/assets/images/taskArrangement/background-yellow.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-skyblue {
    background: url("~@/assets/images/taskArrangement/background-skyblue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-green {
    background: url("~@/assets/images/taskArrangement/background-green.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-lilac {
    background: url("~@/assets/images/taskArrangement/background-lilac.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-start,
  .span-check,
  .span-edit,
  .span-delete {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.625rem;
    cursor: pointer;
  }
  .span-start {
    background: url("~@/assets/images/taskArrangement/start.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-check {
    background: url("~@/assets/images/taskArrangement/check.png") no-repeat
      center center;
    background-size: 100% 100%;
    width: 1.5rem;
    height: 1.125rem;
  }
  .span-edit {
    background: url("~@/assets/images/taskArrangement/edit.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-delete {
    background: url("~@/assets/images/taskArrangement/delete.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
}
</style>
